<template>

  <div style="padding:10px;width: auto">
    <div style="margin-top:10px ;display: flex">

      <div style="margin-bottom: 10px;">

        <el-button type="success" icon="el-icon-circle-plus-outline" @click="add()">添加</el-button>
      </div>
      <div style="flex: 1"></div>
      <!-- 搜索区 -->
      <div style="width: 300px;text-align: right">
        <el-input placeholder="请输入内容" v-model="search" style="width: 200px;padding-right: 10px;" clearable></el-input>
        <el-button type="primary" icon="el-icon-search" style="height: 30.5px" @click="newsList()">搜索</el-button>
      </div>
    </div>

    <el-table
        :data="tableData"
        stripe
        border
        style="font-size: 15px;font-weight: lighter;font-family: 'Helvetica Neue', 'Helvetica', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Arial', 'sans-serif'">
      <el-table-column
          prop="id"
          label="新闻id"
          sortable>
      </el-table-column>
      <el-table-column
          prop="title"
          label="标题">
      </el-table-column>
      <el-table-column
          prop="content"
          label="内容">
      </el-table-column>
      <el-table-column
          prop="author"
          label="作者">
      </el-table-column>
      <el-table-column
          prop="nick_name"
          label="管理员名称">
      </el-table-column>
      <el-table-column
          prop="time"
          label="日期">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[6, 8, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top:10px;padding:0"
          :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

let time = 0;  //计算表格偶数次数
export default {
  name: "News",
  data() {
    return {
      form: {}, //前端添加数据表单
      currentPage: 1,
      pageSize: 10,
      total: 0,
      search: '',
      tableData: [] //新闻列表
    }
  },

  /*钩子函数，当页面加载的时候执行*/
  created() {
    this.newsList();
  },

  methods: {
    clearForm() {
      this.form = {};
    },

    add() {
      this.$router.push('/main/newsRelease'); //路由到新闻发布页
    },

    /*save|update请求*/
    update() {
      request.put("/api/news/update", this.form).then((res) => {
        if (res.code === "0") {
          this.$message({
            type: "success",
            message: "修改成功"
          })
        } else {
          this.$message({   //element-ui提供的弹窗信息
            type: "error",
            message: "修改失败"
          })
        }
        this.newsList();
        this.centerDialogVisible = false;
      })
    },

    /*查询所有新闻请求*/
    newsList() {
      request.get("/api/news/newsList", {
        params:
            {
              pageNum: this.currentPage,
              pageSize: this.pageSize,
              search: this.search,
            }
      })
          .then((res => {
            this.tableData = res.data.dataList;
            this.total = res.data.total;
          }))
    },


    /*删除当前新闻*/
    deleteNews(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete("/api/news/delete", {params: {id: id}}).then((res) => {
          if (res.code === "0") {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'error',
              message: '删除失败！'
            });
          }
          this.newsList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },


    handleEdit(index, row) {  //修改按钮触发
      let currentRow = JSON.parse(JSON.stringify(row))//将当前行对象进行生拷贝赋值给表单弹窗
      this.$router.push( { path: "/main/newsRelease", query:currentRow});
    },

    handleDelete(id) {
      this.deleteNews(id);
    },
    handleSizeChange(pageSize) { //改变当前页显示的记录数触发
      this.pageSize = pageSize;
      this.newsList();
    },
    handleCurrentChange(currentPage) { //当前页码触发
      this.currentPage = currentPage;
      this.newsList();
    },

  }
}
</script>

<style>

.block {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "宋体", Arial, sans-serif;
}

</style>
